<template>
    <div class="article-list media-list list-block">
        <ul v-if="item.topic">
            <template v-for="topic in item.topic.list">
                <li @click="navTo(topic.id, topic.forumId)">
                    <!--<div v-if="topic.banner" class="item-content lazy lazy-fadeIn" :data-background="topic.banner" style="background-color: #aaa;">-->
                        <!--{{topic.title}}-->
                    <!--</div>-->
                    <!--<div v-else class="item-content">-->
                        <!--<div class="item-title">{{topic.title}}</div>-->
                    <!--</div>-->
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">{{topic.title}}</div>
                            <div class="item-title-row">
                                <div class="item-subtitle">{{topic.creator.name}}，{{topic.createTime | format_time}}</div>
                                <div class="item-after">
                                    <div class="item-subtitle" v-if="topic.comments.total">
                                        <template v-if="topic.liked">{{topic.liked.total}}赞</template>
                                        <template v-if="topic.comments.total">{{topic.comments.total}}评论</template>
                                    </div>
                                    <div class="item-subtitle" v-else>暂无评论</div>
                                </div>
                            </div>
                            <div class="item-text">{{topic.intro}}</div>
                        </div>
                    </div>
                </li>
            </template>
        </ul>
    </div>
</template>

<script type="text/javascript">
    import store from '../store/index'
    export default{
        name: "article-item",
        props: ['item'],
        methods: {
            navTo(topic_id, forum_id){
                this.$f7.mainView.router.load({url: '/forum-page/' + forum_id + '/topic-page/' + topic_id + '/' });
            },
        },

    }
</script>
